<template>
  <el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false"
    :show-close="close" :close-on-press-escape="false">

    <el-steps :active="active" finish-status="success" simple style="margin-bottom: 20px">
      <el-step title="基本信息">
      </el-step>
      <el-step title="url配置">
      </el-step>
      <el-step title="流程配置"></el-step>
    </el-steps>
    <bpm-form-def-info v-show="active===0" ref="bpmFormDefInfo" @refreshNextData="nextDataHandle"></bpm-form-def-info>
    <bpm-form-def-url v-show="active===1" ref="bpmFormDefUrl" @refreshNextData="nextDataHandle"
      @refreshAdd="closeHandle"></bpm-form-def-url>
    <bpm-form-def-model v-show="active===2" ref="bpmFormDefModel" @refreshNextData="nextDataHandle"
      @refreshAdd="closeHandle">
    </bpm-form-def-model>

    <template slot="footer">
      <el-button v-if="close" @click="visible = false">{{ $t('cancel') }}</el-button>
      <el-button v-if="active!==0" type="warning" @click="backtHandle()">{{ $t('usercenter.backt') }}</el-button>
      <el-button v-if="active!==2" type="primary" @click="nextHandle()">{{ $t('usercenter.next') }}</el-button>
      <el-button v-if="active===2" type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
import BpmFormDefInfo from './bpmFormDef-info'
import BpmFormDefUrl from './bpmFormDef-url'
import BpmFormDefModel from './bpmFormDef-model'
export default {
  data () {
    return {
      visible: false,
      close: true,
      active: 0,
      dataForm: {
        // def表ID（主表）
        id: ''
      }
    }
  },
  methods: {
    // 初始化
    init () {
      this.visible = true
      this.close = true
      this.$nextTick(() => {
        // 默认初始化基本信息
        this.initInfo()
      })
    },
    // 下一步
    nextHandle () {
      if (this.active === 0) {
        // 基本信息提交
        this.$refs.bpmFormDefInfo.dataFormSubmitHandle()
      } else if (this.active === 1) {
        // url信息提交
        this.$refs.bpmFormDefUrl.dataFormSubmitHandle()
      }
    },
    // 关闭按钮回调
    closeHandle (close) {
      this.close = close
    },
    // 保存成功回调
    nextDataHandle (res) {
      // 设置
      if (this.active === 0) {
        // 基本信息保存回调，设置主表ID
        this.dataForm.id = res.data
        this.initUrl()
      } else if (this.active === 1) {
        this.initModel()
      } else if (this.active === 2) {
        // 全部设置完成，隐藏窗口
        this.visible = false
        this.$emit('refreshDataList')
      }
    },
    // 后退
    backtHandle () {
      if (this.active === 1) {
        this.initInfo()
      } else if (this.active === 2) {
        this.initUrl()
      }
    },
    // 确认
    dataFormSubmitHandle () {
      this.$refs.bpmFormDefModel.dataFormSubmitHandle()
    },
    // 加载基本信息设置组件
    initInfo () {
      this.active = 0
      this.$refs.bpmFormDefInfo.dataForm.id = this.dataForm.id
      this.$refs.bpmFormDefInfo.init()
    },
    // 加载URL设置组件
    initUrl () {
      this.active = 1
      this.$refs.bpmFormDefUrl.dataForm.formId = this.dataForm.id
      this.$refs.bpmFormDefUrl.init()
    },
    // 加载URL设置组件
    initModel () {
      this.active = 2
      this.$refs.bpmFormDefModel.formId = this.dataForm.id
      this.$refs.bpmFormDefModel.init()
    }
  },
  components: {
    BpmFormDefInfo,
    BpmFormDefUrl,
    BpmFormDefModel
  }
}
</script>
